<!DOCTYPE html>
<html lang="en">
<head>

    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" integrity="sha384-HSMxcRTRxnN+Bdg0JdbxYKrThecOKuH5zCYotlSAcp1+c8xmyTe9GYg1l9a69psu" crossorigin="anonymous">

    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>

    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" integrity="sha384-aJ21OjlMXNL5UyIl/XNwTMqvzeRMZH2w8c5cRVpzpU8Y5bApTppSuUkhZXN0VxHd" crossorigin="anonymous"></script>

    <meta charset="UTF-8">
    <title>食堂人流监控</title>

    <style>
        @-webkit-keyframes animate-width {
            0% {
                width: 0;
            }
            100% {
                visibility: visible;
            }
        }
        @-moz-keyframes animate-width {
            0% {
                width: 0;
            }
            100% {
                visibility: visible;
            }
        }
        @keyframes animate-width {
            0% {
                width: 0;
            }
            100% {
                visibility: visible;
            }
        }
        @-webkit-keyframes animate-height {
            0% {
                height: 0;
            }
            100% {
                visibility: visible;
            }
        }
        @-moz-keyframes animate-height {
            0% {
                height: 0;
            }
            100% {
                visibility: visible;
            }
        }
        @keyframes animate-height {
            0% {
                height: 0;
            }
            100% {
                visibility: visible;
            }
        }

        body{
            height: 640px;
            width: 360px;
            color: #cdcdcd;
            padding: 20px;
            margin-left: 100px;
            margin-top: 50px;
            border-radius: 20px;
            border: 2px solid grey;
        }

        #bar-chart {
            height: 100%;
            width: 215px;
            position: relative;
            margin: 20px auto 0;
        }
        #bar-chart * {
            box-sizing: border-box;
        }
        #bar-chart .graph {
            height: 283px;
            position: relative;
        }
        #bar-chart .bars {
            height: 211px;
            padding: 0 2%;
            position: absolute;
            width: 90%;
            z-index: 10;
        }
        #bar-chart .bar-group {
            display: block;
            float: left;
            height: 100%;
            position: relative;
            width: 12%;
            margin-right: 10%;
        }
        #bar-chart .bar-group:last-child {
            margin-right: 0;
        }
        #bar-chart .bar-group .bar {
            visibility: hidden;
            height: 0;
            -webkit-animation: animate-height;
            -moz-animation: animate-height;
            animation: animate-height;
            animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
            -webkit-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
            -moz-animation-timing-function: cubic-bezier(0.35, 0.95, 0.67, 0.99);
            animation-duration: 0.4s;
            -webkit-animation-duration: 0.4s;
            -moz-animation-duration: 0.4s;
            animation-fill-mode: forwards;
            -webkit-animation-fill-mode: forwards;
            box-shadow: 1px 0 2px rgba(0, 0, 0, 0.15);
            border: 1px solid #2d2d2d;
            border-radius: 3px 3px 0 0;
            bottom: 0;
            cursor: pointer;
            height: 0;
            position: absolute;
            text-align: center;
            width: 25%;
        }
        #bar-chart .bar-group .bar:nth-child(2) {
            left: 60%;
        }
        #bar-chart .bar-group .bar:nth-child(3) {
            left: 120%;
        }
        #bar-chart .bar-group .bar span {
            display: none;
        }
        #bar-chart .bar-group .bar-1 {
            animation-delay: 0.3s;
            -webkit-animation-delay: 0.3s;
        }
        #bar-chart .bar-group .bar-2 {
            animation-delay: 0.4s;
            -webkit-animation-delay: 0.4s;
        }
        #bar-chart .bar-group .bar-3 {
            animation-delay: 0.5s;
            -webkit-animation-delay: 0.5s;
        }
        #bar-chart .bar-group .bar-4 {
            animation-delay: 0.6s;
            -webkit-animation-delay: 0.6s;
        }
        #bar-chart .bar-group .bar-5 {
            animation-delay: 0.7s;
            -webkit-animation-delay: 0.7s;
        }
        #bar-chart .bar-group .bar-6 {
            animation-delay: 0.8s;
            -webkit-animation-delay: 0.8s;
        }
        #bar-chart .bar-group .bar-7 {
            animation-delay: 0.9s;
            -webkit-animation-delay: 0.9s;
        }
        #bar-chart .bar-group .bar-8 {
            animation-delay: 1s;
            -webkit-animation-delay: 1s;
        }
        #bar-chart .bar-group .bar-9 {
            animation-delay: 1.1s;
            -webkit-animation-delay: 1.1s;
        }
        #bar-chart .bar-group .bar-10 {
            animation-delay: 1.2s;
            -webkit-animation-delay: 1.2s;
        }
        #bar-chart .bar-group .bar-11 {
            animation-delay: 1.3s;
            -webkit-animation-delay: 1.3s;
        }
        #bar-chart .bar-group .bar-12 {
            animation-delay: 1.4s;
            -webkit-animation-delay: 1.4s;
        }
        #bar-chart .bar-group .bar-13 {
            animation-delay: 1.5s;
            -webkit-animation-delay: 1.5s;
        }
        #bar-chart .bar-group .bar-14 {
            animation-delay: 1.6s;
            -webkit-animation-delay: 1.6s;
        }
        #bar-chart .bar-group .bar-15 {
            animation-delay: 1.7s;
            -webkit-animation-delay: 1.7s;
        }
        #bar-chart ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }
        #bar-chart .x-axis {
            bottom: 0;
            position: absolute;
            text-align: center;
            width: 100%;
        }
        #bar-chart .x-axis li {
            float: left;
            margin-right: 10.5%;
            font-size: 11px;
            width: 8%;
        }
        #bar-chart .x-axis li:last-child {
            margin-right: 0;
        }
        #bar-chart .y-axis {
            position: absolute;
            text-align: right;
            width: 100%;
        }
        #bar-chart .y-axis li {
            border-top: 1px solid #4e5464;
            display: block;
            height: 70px;
            width: 100%;
        }
        #bar-chart .y-axis li span {
            display: block;
            font-size: 11px;
            margin: -10px 0 0 -60px;
            padding: 0 10px;
            width: 40px;
        }
        #bar-chart .stat-1 {
            background-image: -webkit-linear-gradient(left, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);
            background-image: linear-gradient(to right, #ff4500 0%, #ff4500 47%, #cf3a02 50%, #cf3a02 100%);
        }
        #bar-chart .stat-2 {
            background-image: -webkit-linear-gradient(left, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);
            background-image: linear-gradient(to right, #b8f123 0%, #b8f123 47%, #79a602 50%, #79a602 100%);
        }
        #bar-chart .stat-3 {
            background-image: -webkit-linear-gradient(left, #00c5ff 0%, #00c5ff 47%, #0383a9 50%, #0383a9 100%);
            background-image: linear-gradient(to right, #00c5ff 0%, #00c5ff 47%, #0383a9 50%, #0383a9 100%);
        }

    </style>
    <script>
        window.onload = function (ev) {
            reflash()
        }
        function reflash() {
            var positionId = sessionStorage.getItem("positionId")
            if(positionId == null) positionId = 1
            $.ajax({
                url:"my_window/getStream",
                contentType:"application/json;charset=UTF-8",
                data: { positionId: positionId},
                dataType:"json",
                type:"get",
                success:function (data) {
                    var table1 = "<ul class=\"x-axis\">\n"
                    var table2 = "<div class=\"bars\">"
                    length = data.data.length
                    if(length >= 1){
                        //
                        for(var i = 0;i < length;i++){
                            var number = data.data[i].personNumber;
                            table1 += "<li><span>"+data.data[i].windowName+"</span></li>\n";
                            table2 += "<div class=\"bar-group\">\n" +
                                "                <div class=\"bar bar-1 stat-1\" style=\"height: "+number+"%;\">\n" +
                                "                    <span>4080</span>\n" +
                                "                </div>\n" +
                                "            </div>"
                        }
                        table1 += "</ul>"
                        table2 += "</div>"
                        document.getElementById("my-x-axis").innerHTML = table1
                        document.getElementById("my-bars").innerHTML = table2
                    }else {
                        alert("查无数据！！！")
                    }
                },
                error:function () {
                    alert("error");
                }
            });
        }
        function toIndexH(){
            window.location = "index.html"
        }
    </script>
</head>
<body>

<div id="bar-chart">
    <button type="button" class="btn btn-default" onclick="toIndexH()" style="margin-bottom: 10px">返回</button>
    <button type="button" class="btn btn-default" onclick="reflash()" style="margin-bottom: 10px">刷新</button>
    <div class="graph">
        <div id="my-x-axis"></div>

        <ul class="y-axis">
            <li><span>30</span></li>
            <li><span>20</span></li>
            <li><span>10</span></li>
            <li><span>0</span></li>
        </ul>

        <div id="my-bars">

        </div>



    </div>
</div>

<div style="text-align:center;clear:both">
</div>

</body>
</html>